<template>
	<view class="con">
		<view class="title">
			<view data-en="true" @click="isEnlarge" :class="blowUp == 'true' ? 'enlarge' : ''">活动</view>
			<view data-en="false" @click="isEnlarge" :class="blowUp == 'false' ? 'enlarge' : ''">活动管理</view>
		</view>
		<view class="content" v-for="(item, index) in list" :key="item.active_id" v-if="blowUp == 'true' ? true : false">
			<image :data-id="item" @click="enroll" :src="item.active_main_picture"></image>
			<text :data-id="item.active_id" class="iconfont start" :class="!item.status? 'icon-xingzhuang60kaobei2 yellow' : 'icon--star-o'" @click="enshrine"></text>
			<view :data-id="item" @click="enroll">
				<text>{{ item.active_title }}</text>
				<text>报名</text>
			</view>
		</view>
		<view class="content1" v-if="blowUp == 'false' ? true : false">
			<navigator url="/pages/activity/release/release">
				<view>
					<text class="iconfont icon-plus"></text>
					<text>发布活动</text>
				</view>
			</navigator>
			<view class="substance" v-for="(value, index) in list" :key="value.active_id">
				<view>
					<view>{{ value.active_title }}</view>
					<view>
						<view :data-value="value" @click="edit">编辑</view>
						<view :data-id="value.active_id" @click="del">删除</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popupError" type="message"><uni-popup-message type="error" message="查询失败" :duration="1000"></uni-popup-message></uni-popup>
		<uni-popup ref="popupSuccess" type="message"><uni-popup-message type="success" message="查询成功" :duration="1000"></uni-popup-message></uni-popup>
		<uni-popup ref="delError" type="message"><uni-popup-message type="error" message="刪除失败" :duration="1000"></uni-popup-message></uni-popup>
		<uni-popup ref="delSuccess" type="message"><uni-popup-message type="success" message="刪除成功" :duration="1000"></uni-popup-message></uni-popup>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" type="error" title="提示" content="确认删除吗？" :duration="200" before-close="false" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="addCollectionError" type="message"><uni-popup-message type="error" message="添加收藏失败" :duration="1000"></uni-popup-message></uni-popup>
		<uni-popup ref="addCollectionSuccess" type="message"><uni-popup-message type="success" message="添加收藏成功" :duration="1000"></uni-popup-message></uni-popup>
		<uni-popup ref="delCollectionError" type="message"><uni-popup-message type="error" message="取消收藏失败" :duration="1000"></uni-popup-message></uni-popup>
		<uni-popup ref="delCollectionSuccess" type="message"><uni-popup-message type="success" message="取消收藏成功" :duration="1000"></uni-popup-message></uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			blowUp: 'true',
			list: [],
			delId: 0,
			wx_user_id: 0,
		};
	},
	created() {
		this.getActivities();
		this.getSc();
		uni.getStorage({
			key: 'myInfo',
			success: res => {
				this.wx_user_id = res.data.id;
			}
		});
	},
	methods: {
		async getSc() {
			const { data: res } = await this.$http({
				url: '/user/myFavorites',
				data: {
					wx_user_id: this.wx_user_id
				}
			});
		},
		isEnlarge(e) {
			// console.log(e.currentTarget.dataset.en)
			this.blowUp = e.currentTarget.dataset.en;
		},
		// 报名
		enroll(e) {
			console.log(e)
			uni.setStorage({
				key: 'value1',
				data: e.currentTarget.dataset.id,
				success: function() {
					console.log('success');
				}
			});
			uni.navigateTo({
				url: '/pages/activity/detailed/detailed'
			});
		},
		//查询所有活动
		async getActivities() {
			const { data: res } = await this.$http({
				url: '/activites/findAllCampusActivites'
			});
			console.log(res);
			if (res.code != 200) this.$refs.popupError.open();
			this.$refs.popupSuccess.open();
			this.list = res.data;
		},
		//收藏
		enshrine(e) {
			const { id } = e.currentTarget.dataset;
			this.list.forEach((v, i) => {
				if (v.active_id == id) {
					if (v.status == 1) {
						this.$http({
							url: '/activites/addFavorites',
							data: {
								campus_activites_id: id,
								wx_user_id: this.wx_user_id,
								status: 0
							}
						}).then(res => {
							// console.log(res);
							if (res.code != 200) this.$refs.addCollectionError.open();
							this.$refs.addCollectionSuccess.open();
							v.status = 0;
							this.getSc();
						});
					} else {
						this.$http({
							url: '/activites/unFavorite',
							data: {
								campus_activites_id: id,
								wx_user_id: this.wx_user_id,
								status: 1
							}
						}).then(res => {
							// console.log(res);
							if (res.code != 200) this.$refs.delCollectionError.open();
							this.$refs.delCollectionSuccess.open();
							v.status = 1;
							this.getSc();
						});
					}
				}
			});
		},
		// 刪除
		del(e) {
			console.log(e.currentTarget.dataset.id);
			this.$refs.popup.open();
			this.delId = e.currentTarget.dataset.id;
		},
		close() {
			this.$refs.popup.close();
		},
		async confirm() {
			const { data: res } = await this.$http({
				url: '/activites/deleteCampusActivites',
				data: {
					active_id: this.delId
				}
			});
			console.log(res);
			if (res.code != 200) this.$refs.delError.open();
			this.$refs.delSuccess.open();
			this.getActivities();
			this.$refs.popup.close();
		},
		//编辑
		edit(e) {
			console.log(e.currentTarget.dataset.value);
			uni.setStorage({
				key: 'value',
				data: e.currentTarget.dataset.value,
				success: function() {
					console.log('success');
				}
			});
			uni.navigateTo({
				url: '/pages/activity/edit/edit'
			});
		}
	},
	filters: {
		rechecking(id) {
			for (let item of collectionId) {
				console.log(item);
				console.log(id);
				if (item == id) {
					return true;
				} else {
					return false;
				}
			}
		}
	}
};
</script>

<style lang="less">
@import url('../../static/font/iconfont.css');
body {
	background-color: #f6f6f6;
}
.enlarge {
	font-size: 54rpx;
	border-bottom: 4rpx solid #f9cc66;
	justify-content: center;
}
.yellow {
	color: yellow;
}
.con {
	width: 690rpx;
	margin: 0 auto;
}
.title {
	display: flex;
	align-items: center;
	width: 690rpx;
	height: 110rpx;
	font-weight: bold;
	font-size: 34rpx;

	> view:first-child {
		display: flex;
		align-items: center;
		width: 160rpx;
	}
	> view:last-child {
		display: flex;
		align-items: center;
		width: 260rpx;
	}
}

.content {
	width: 690rpx;
	height: 622rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-bottom: 30rpx;
	box-shadow: #c0c0c0 1rpx 1rpx 1rpx 1rpx;
	border-radius: 20rpx;
	.start {
		position: absolute;
		top: 25rpx;
		right: 24rpx;
		font-size: 50rpx;
		z-index: 9999;
	}
	image {
		width: 690rpx;
		height: 500rpx;
	}
	> view {
		width: 632rpx;
		height: 122rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text {
			font-size: 30rpx;
			font-weight: bold;
		}
		text:last-child {
			width: 166rpx;
			height: 60rpx;
			background-color: #f9cc66;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
		}
	}
}
.content1 {
	navigator {
		> view {
			background-color: #f9cc66;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			font-weight: bold;
			width: 690rpx;
			height: 120rpx;
			box-shadow: #c0c0c0 1rpx 1rpx 1rpx 1rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}
	}
	> view {
		width: 690rpx;
		height: 120rpx;
		box-shadow: #c0c0c0 1rpx 1rpx 1rpx 1rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}
	.substance {
		> view {
			width: 630rpx;
			height: 120rpx;
			display: flex;
			margin: 0 auto;
			justify-content: space-between;
			align-items: center;
			> view:first-child {
				font-weight: bold;
				font-size: 33rpx;
			}
			> view:last-child {
				display: flex;
				width: 220rpx;
				height: 40rpx;
				justify-content: space-between;
				view {
					width: 100rpx;
					height: 40rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					font-weight: bold;
					justify-content: center;
				}
				view:first-child {
					background-color: #f9cc66;
				}
				view:last-child {
					border: 1rpx solid #e92525;
					color: #e92525;
				}
			}
		}
	}
}
</style>
